<template>
  <div id="app">
    <!-- 顶部导航 -->
    <div class="top-nav container" :class="{'scrolled': isScrolled}">
      <div @click="scrollToSection('home')" style="cursor: pointer;" class="logo">
        <img src="@/assets/companyIntroduction/basic/Logo.webp" alt="公司logo">
        <i class="fas fa-hands-helping"></i> Hand In Hand
      </div>
      <div class="nav-links" :class="{'active': mobileMenuVisible}">
        <!-- 服务导航项（添加下拉列表） -->
        <div class="nav-item with-dropdown" @mouseenter="showServiceDropdown = true"
             @mouseleave="showServiceDropdown = false">
          <a @click="handleServiceClick($event)">{{ $t('nav.service') }}</a>
          <!-- 服务下拉列表 -->
          <ul class="service-dropdown" :class="{'visible': showServiceDropdown || mobileServiceOpen}">
            <li @click="scrollToSection('air-freight')">
              <a href="#air-freight">{{ $t('service.airFreight') }}</a>
            </li>
            <li @click="scrollToSection('logistics')">
              <a href="#logistics">{{ $t('service.logistics') }}</a>
            </li>
            <li @click="scrollToSection('business')">
              <a href="#business">{{ $t('nav.business') }}</a>
            </li>
            <li @click="openWarehouseSystem">
              <a href="javascript:void(0)">{{ $t('service.warehouse') }}</a>
            </li>
          </ul>
        </div>
        <!--        <a href="#talent" @click="scrollToSection('talent')">{{ $t('nav.talent') }}</a>-->
        <!--        <a href="#business" @click="scrollToSection('business')">{{ $t('nav.business') }}</a>-->
        <a @click="scrollToSection('products')">{{ $t('nav.products') }}</a>
        <a @click="scrollToSection('about')">{{ $t('nav.aboutUs') }}</a>
        <a @click="scrollToSection('contact')">{{ $t('nav.contact') }}</a>
      </div>

      <!-- 国旗按钮（放在这里） -->
      <button class="lang-btn" @click="toggleLanguage">
                <img
          v-if="currentLanguage === 'zh'"
          src="@/assets/companyIntroduction/basic/Flags/china.webp"
          alt="中文"
          class="flag-icon"
        >
        <img
          v-else
          src="@/assets/companyIntroduction/basic/Flags/us.webp"
          alt="English"
              class="flag-icon"
        >
      </button>

      <!-- 右边按钮 -->
      <div class="right-actions">
        <button class="location-btn" @click="toggleLocationPanel">
          <i class="fas fa-map-marker-alt"></i> {{ $t('btn.location') }}
        </button>
        <button class="mobile-menu-btn" @click="toggleMobileMenu">
          <i class="fas fa-bars"></i>
        </button>
      </div>

    </div>

    <!-- 公司位置面板 -->
    <div class="location-panel" :class="{active: locationPanelVisible}">
      <button class="close-btn" @click="locationPanelVisible = false">
        <i class="fas fa-times"></i>关闭面板
      </button>
      <h2>公司位置</h2>
      <p style="margin: 20px 0; line-height: 1.6;">
        <strong>地址：</strong><br>
        广州越秀区万菱广场<br>
        商务楼1405 & 1415-1
      </p>
      <p style="margin: 20px 0; line-height: 1.6;">
        <strong>营业时间：</strong><br>
        上午10:00 - 下午18:30<br>
      </p>
<!--      <div-->
<!--        style="height: 300px; background: #e9ecef; margin-top: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden;">-->
<!--        <div-->
<!--          style="width: 100%; height: 100%; background: linear-gradient(135deg, #90DFC3 0%, #25845D 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white;">-->
<!--          <i class="fas fa-map-marker-alt" style="font-size: 48px; margin-bottom: 20px;"></i>-->
<!--          <h3>Hand In Hand 总部</h3>-->
<!--          <p style="margin-top: 10px;">点击查看详细地图</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div style="height: 300px; border-radius: 8px; overflow: hidden;">-->
<!--        <div id="mapContainer" style="width: 100%; height: 100%;"></div>-->
<!--      </div>-->
    </div>

    <!-- 标语区域 -->
    <section class="slogan-section" id="home">
      <div class="container">
        <h1 class="main-slogan">{{ $t('title.mainSlogan') }}</h1>
        <p class="sub-slogan">{{ $t('title.subSlogan') }}</p>
      </div>
    </section>

    <!-- 主营业务区域（轮播图形式） -->
    <section class="business-section" id="services">
      <div class="container">
        <h2 class="section-title">{{ $t('title.business') }}</h2>
        <p class="section-subtitle">{{ $t('title.businessSub') }}</p>

        <!-- 轮播容器 -->
        <div class="business-carousel-container">
          <!-- 左右切换按钮 -->
          <button class="business-carousel-btn prev-btn" @click="prevBusinessSlide"
                  :disabled="businessCurrentIndex === 0">
            <i class="fas fa-chevron-left"></i>
          </button>
          <button class="business-carousel-btn next-btn" @click="nextBusinessSlide"
                  :disabled="businessCurrentIndex >= businessTotalPages - 1">
            <i class="fas fa-chevron-right"></i>
          </button>

          <!-- 轮播轨道 -->
          <div class="business-carousel-wrapper">
            <div class="business-carousel-track"
                 :style="{ transform: `translateX(-${businessCurrentIndex * slidePercentage}%)` }">
              <div class="business-card" v-for="(business, index) in businesses" :key="index">
                <div class="business-image">
                  <img v-lazy="business.image" :alt="getBusinessTitle(index)" class="lazy-img"/>
                </div>
                <div class="business-text">
                  <h3>{{ getBusinessTitle(index) }}</h3>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 轮播指示器 -->
        <div class="business-carousel-indicators">
          <span
            class="indicator"
            v-for="(page, index) in businessTotalPages"
            :key="index"
            :class="{ active: businessCurrentIndex === index }"
            @click="businessCurrentIndex = index"
          ></span>
        </div>
      </div>
    </section>

    <!-- 产品区域 -->
    <section class="products-section" id="products">
      <div class="container">
        <h2 class="section-title">{{ $t('title.products') }}</h2>
        <p class="section-subtitle">{{ $t('title.productsSub') }}</p>

        <!-- 轮播容器 -->
        <div class="carousel-container">
          <!-- 左右切换按钮 -->
          <button class="carousel-btn prev-btn" @click="prevSlide" :disabled="currentIndex === 0">
            <i class="fas fa-chevron-left"></i>
          </button>
          <button class="carousel-btn next-btn" @click="nextSlide" :disabled="currentIndex >= totalPages - 1">
            <i class="fas fa-chevron-right"></i>
          </button>

          <!-- 轮播轨道（溢出隐藏） -->
          <div class="carousel-wrapper">
            <div class="carousel-track" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
              <!-- 产品卡片（循环渲染） -->
              <div class="product-card" v-for="(product, index) in products" :key="index"
                   @click="openProductModal(product)">
                <div class="product-image">
                  <img v-lazy="product.image" :alt="product.name" class="lazy-img">
                </div>
                <div class="product-info">
                  <h3 class="product-name">{{ product.name }}</h3>
                  <p>{{ product.shortDesc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
      <span
        class="indicator"
        v-for="(page, index) in totalPages"
        :key="index"
        :class="{ active: currentIndex === index }"
        @click="currentIndex = index"
      ></span>
        </div>

      </div>
    </section>


    <!-- 合作伙伴模块 -->
    <section class="partners-section" id="partners">
      <div class="container">
        <h2 class="section-title">{{ $t('partners.sectiontitle') }}</h2>
        <p class="section-subtitle">{{ $t('partners.sectionsubtitle') }}</p>

        <div class="partners-bubbles">
          <div class="partners-grid">
            <div
              v-for="partner in partners"
              :key="partner.name"
              class="partner-bubble"
              @mouseenter="showEvaluation(partner,partner.name, $event)"
              @mouseleave="hideEvaluation"
              @click="openReviewModal(partner)"
            >
              <img v-lazy="partner.image" :alt="partner.name" class="lazy-img">
            </div>
          </div>
        </div>
      </div>
    </section>


    <!-- 关于我们区域 -->
    <section class="about-section" id="about">
      <div class="about-overlay"></div>
      <div class="container">
        <div class="about-content">
          <h2 class="section-title">{{$t('about.sectiontitle')}}</h2>
          <h2 class="section-subtitle">{{$t('about.sectionsubtitle')}}</h2>
          <p style="font-size: 18px; line-height: 1.8; color: #555;">
            {{ $t('about.companyName') }}
          </p>
          <p style="font-size: 9pt; line-height: 1.8; color: #555;">
            {{ $t('about.desc1') }}
          </p>
          <p style="font-size: 9pt; line-height: 1.8; color: #555;">
            {{ $t('about.desc2') }}
          </p>
          <p style="font-size: 9pt; line-height: 1.8; color: #555;">
            {{ $t('about.desc3') }}
          </p>
          <!-- 圆形图片+关键词展示区域 -->
          <div class="about-cards">
            <div class="about-card">
              <img src="@/assets/companyIntroduction/basic/Aboutus/CompanyEstablishment.webp" alt="成立时间"
                   class="about-card-img">
              <p class="about-card-title">{{ currentLanguage === 'zh' ? '2017年' : '2017' }}</p>
              <p class="about-card-sub">{{ currentLanguage === 'zh' ? '公司成立' : 'Company Established' }}</p>
            </div>
            <div class="about-card">
              <img src="@/assets/companyIntroduction/basic/Aboutus/CustomersServed.webp" alt="服务客户"
                   class="about-card-img">
              <p class="about-card-title">{{ currentLanguage === 'zh' ? '5000+' : '5000+' }}</p>
              <p class="about-card-sub">{{ currentLanguage === 'zh' ? '服务客户' : 'Clients Served' }}</p>
            </div>
            <div class="about-card">
              <img src="@/assets/companyIntroduction/basic/Aboutus/ServiceScore.webp" alt="服务范围"
                   class="about-card-img">
              <p class="about-card-title">{{ currentLanguage === 'zh' ? '全球各地' : 'Worldwide' }}</p>
              <p class="about-card-sub">{{ currentLanguage === 'zh' ? '服务范围' : 'Service Coverage' }}</p>
            </div>
            <div class="about-card">
              <img src="@/assets/companyIntroduction/basic/Aboutus/CompanyNature.webp" alt="公司性质"
                   class="about-card-img">
              <p class="about-card-title">{{ currentLanguage === 'zh' ? '中外合资' : 'Joint Venture' }}</p>
              <p class="about-card-sub">{{ currentLanguage === 'zh' ? '公司性质' : 'Company Nature' }}</p>
            </div>
            <div class="about-card">
              <img src="@/assets/companyIntroduction/basic/Aboutus/Partners.webp" alt="合作伙伴"
                   class="about-card-img">
              <p class="about-card-title">{{ currentLanguage === 'zh' ? '范围广泛' : 'Extensive' }}</p>
              <p class="about-card-sub">{{ currentLanguage === 'zh' ? '合作伙伴' : 'Partners' }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部区域 -->
    <footer class="footer" id="contact">
      <div class="container">
        <div class="about-links">
          <div class="link-column">
            <h3>{{ $t('about.links.title1') }}</h3>
            <ul>
              <li v-for="(item, index) in $t('about.links.list1')" :key="index">
                <a href="#">{{ item }}</a>
              </li>
            </ul>
          </div>

          <!-- 关于产品 -->
          <div class="link-column">
            <h3>{{ $t('about.links.title2') }}</h3>
            <ul>
              <li v-for="(item, index) in $t('about.links.list2')" :key="index">
                <a href="#">{{ item }}</a>
              </li>
            </ul>
          </div>

          <!-- 影响力 -->
          <div class="link-column">
            <h3>{{ $t('about.links.title3') }}</h3>
            <ul>
              <li v-for="(item, index) in $t('about.links.list3')" :key="index">
                <a href="#">{{ item }}</a>
              </li>
            </ul>
          </div>

          <!-- 新闻媒体 -->
          <div class="link-column">
            <h3>{{ $t('about.links.title4') }}</h3>
          </div>

          <!-- 联系我们 -->
          <div class="link-column">
            <h3>{{ $t('about.links.title5') }}</h3>
            <ul>
              <li v-for="(item, index) in $t('about.links.list5')" :key="index">
                <a href="#">{{ item }}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="footer-content">
          <div class="logo" @click="scrollToSection('home')" style="cursor: pointer;">
            <i class="fas fa-hands-helping"></i> Hand In Hand
          </div>
          <div class="social-icons">
            <a
              href="javascript:void(0)"
              class="social-icon"
              v-for="(social, index) in socialMedia"
              :key="index"
              :aria-label="social.name + ' link'"
              @click="openSocialModal(social)"
            >
              <!-- 添加圆形背景容器 -->
              <span class="icon-circle">
                <img :src="social.localIcon" :alt="social.name + ' icon'" class="float-icons">
              </span>
            </a>
          </div>
        </div>
        <div class="copyright">
          © 2017 裴趣商贸公司. 保留所有权利。
        </div>
      </div>
    </footer>

    <!-- 社交图标模态框 -->
    <div class="modal-overlay" :class="{active: socialModalVisible}" @click.self="closeSocialModal">
      <div class="product-modal" v-if="currentSocial">
        <button class="modal-close" @click="closeSocialModal">
          <i class="fas fa-times"></i>
        </button>
        <div class="modal-content" style="flex-direction: column; text-align: center;">
          <h2 class="modal-title">{{ currentSocial.name }}</h2>
          <div v-if="currentSocial.type === 'image'" class="modal-image">
            <img :src="currentSocial.content" :alt="currentSocial.name" style="max-height:300px;">
          </div>
          <div v-else class="modal-info">
            <p style="font-size:18px; color:#555;">{{ currentSocial.content }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 品牌评论模态框 -->
    <div class="modal-overlay" :class="{active: reviewModalVisible}" @click.self="closeReviewModal">
      <div class="product-modal" v-if="currentReview">
        <button class="modal-close" @click="closeReviewModal">
          <i class="fas fa-times"></i>
        </button>
        <div class="modal-content" style="flex-direction: column; text-align: center;">
          <h2 class="modal-title">{{ currentReview.partnerName }}</h2>
          <div class="modal-image">
            <!-- 这里用图片方式展示评论卡（比如你准备好的截图） -->
            <img :src="currentReview.image" :alt="currentReview.partnerName" style="max-width:400px;">
          </div>
        </div>
      </div>
    </div>


    <!-- 产品模态框 -->
    <div class="modal-overlay" :class="{active: modalVisible}" @click.self="closeModal">
      <div class="product-modal" v-if="currentProduct">
        <button class="modal-close" @click="closeModal">
          <i class="fas fa-times"></i>
        </button>
        <div class="modal-content">
          <div class="modal-image">
            <img :src="currentProduct.image" :alt="currentProduct.name">
          </div>
          <div class="modal-info">
            <h2 class="modal-title">{{ currentProduct.name }}</h2>
            <p class="modal-desc">{{ currentProduct.longDesc }}</p>

            <ul class="modal-features">
              <li v-for="(feature, index) in currentProduct.features" :key="index">
                <i class="fas fa-check-circle"></i> {{ feature }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import ReviewCard1 from '../src/assets/evaluationCard/ReviewCard1.vue';
  import ReviewCard2 from '../src/assets/evaluationCard/ReviewCard2.vue';
  import ReviewCard3 from '../src/assets/evaluationCard/ReviewCard3.vue';
  import ReviewCard4 from '../src/assets/evaluationCard/ReviewCard4.vue';
  import ReviewCard5 from '../src/assets/evaluationCard/ReviewCard5.vue';

  export default {

    components: { ReviewCard1,ReviewCard2,ReviewCard3,ReviewCard4,ReviewCard5 },
    data() {
      return {

        reviewModalVisible: false,
        currentReview: null,


        // 存储所有可用组件及其对应的 props 数据
        availableComponents: [
          {
            component: ReviewCard1,
            // 动态生成props的函数：接收评价数据、内容、品牌名
            getProps: (evaluation, content, partner) => ({
              reviewText: content, // 评论内容（根据语言切换）
              avatarUrl: partner.image, // 随机头像
              avatarAlt: partner.name, // 品牌名作为头像描述
              rating: evaluation.rating // 真实评分
            })
          },
          {
            component: ReviewCard2,
            getProps: (evaluation, content, partner) => {
              // 拆分换行内容为上下两行（适配组件的textTop/textBottom）
              return {
                text: content,
                avatarUrl: partner.image,
                avatarAlt: partner.name,
                rating: evaluation.rating // 真实评分
              }
            }
          },
          {
            component: ReviewCard3,
            getProps: (evaluation, content, partner) => {
              // 拆分换行内容为上下两行（适配组件的textTop/textBottom）
              const [line1, line2] = content.split('\n');
              return {
                line1: line1 || '',
                line2: line2 || '', // 若无第二行则复用第一行
                avatarUrl: partner.image
              }
            }
          },
          {
            component: ReviewCard4,
            getProps: (evaluation, content, partner) => {
              // 拆分换行内容为上下两行（适配组件的textTop/textBottom）
              const [textTop, textBottom] = content.split('\n');
              return {
                textTop: textTop || '',
                textBottom: textBottom || '', // 若无第二行则复用第一行
                avatarUrl: partner.image,
                avatarAlt: partner.name
              }
            }
          },
          {
            component: ReviewCard5,
            getProps: (evaluation, content,partner) => ({
              avatarUrl: partner.image,
              avatarAlt: partner.name,
              text: content,
            })
          }
        ],

        selectedComponent: null,
        selectedComponentProps: {},

        // 新增：当前评论卡片的样式（1-24）
        currentReviewStyle: 1,
        // 新增：记录每个品牌上次使用的样式（避免连续重复）
        lastUsedStyles: {},
        // 新增：是否显示评论卡片（复用现有逻辑，统一控制）
        isReviewVisible: false,

        // 合作伙伴评价数据（与partners对应）
        partnerEvaluations: {
          "BYBIT": {
            rating: 5,
            content_en: "Clear communication\n" + "No hassle.",
            content_zh: "清晰沟通 无麻烦。",
            date: "2023-08-15"
          },
          "UnderArmour": {
            rating: 4,
            content_en: "Fast delivery\n mpressive overal.",
            content_zh: "快速配送 总体令人印象深刻。",
            date: "2023-06-20"
          },
          "MinistryofEducationSINGAPORE": {
            rating: 5,
            content_en: "Excellent service Very satisfied.",
            content_zh: "优质服务 非常满意。",
            date: "2023-10-12"
          },
          "Shell": {
            rating: 5,
            content_en: "Professional team\n" + "Easy to work with.",
            content_zh: "专业团队,易于使用。",
            date: "2023-09-05"
          },
          "Zadaz": {
            rating: 5,
            content_en: "Top quality Highly recommended.",
            content_zh: "顶级品质 强烈推荐。",
            date: "2023-09-05"
          },
          "ComfortDelgro": {
            rating: 4,
            content_en: "Trustworthy brand Reliable always.",
            content_zh: "值得信赖的公司，始终可靠。",
            date: "2023-07-18"
          },
          "RoyalBankOfCanada": {
            rating: 5,
            content_en: "Prompt help Solves issues fast.",
            content_zh: "有显著解决问题的能力",
            date: "2023-10-12"
          },
          "Sembcorp": {
            rating: 5,
            content_en: "Value for money, worth every cent.",
            content_zh: "物有所值，每一美分都值得。",
            date: "2023-10-12"
          },
          "amazon": {
            rating: 5,
            content_en: "Great services Will repurchase.",
            content_zh: "优质服务会回购。",
            date: "2023-10-12"
          },
          "TheBlockchainCenter": {
            rating: 5,
            content_en: "Friendly support Quick response.",
            content_zh: "友好支持 快速响应。",
            date: "2023-10-12"
          },
          "SPADIXTELECOM": {
            rating: 5,
            content_en: "Smooth experience, 5/5 rating",
            content_zh: "流畅的体验，评分5颗星。",
            date: "2023-10-12"
          },
          "MINDEFSINGAPORE": {
            rating: 5,
            content_en: "Consistent quality Never disappoints.",
            content_zh: "始终如一的质量永不让人失望。",
            date: "2023-10-12"
          },
          "ARUVA": {
            rating: 5,
            content_en: "Long-lasting use this.",
            content_zh: "长期使用。",
            date: "2023-10-12"
          },
          "UnitedMiningIndustries": {
            rating: 5,
            content_en: "Professional team Easy to work with.",
            content_zh: "专业团队\n" + "易于使用。",
            date: "2023-10-12"
          },
          "CHONGQING": {
            rating: 5,
            content_en: "Kind staff, pleasant interaction.",
            content_zh: "友好的员工，愉快的互动。",
            date: "2023-10-12"
          },
          "NATURESVILLE": {
            rating: 5,
            content_en: "After-sales great\n Fixes problems well",
            content_zh: "售后服务很好\n" + "很好地解决问题。",
            date: "2023-10-12"
          },
          "GROUPON": {
            rating: 5,
            content_en: "Products fit needs\n Super practical.",
            content_zh: "产品适合需求 \n超级实用。",
            date: "2023-10-12"
          },
          "Olympus": {
            rating: 5,
            content_en: "Cooperation smooth, no extra trouble.",
            content_zh: "合作顺利，没有额外麻烦。",
            date: "2023-10-12"
          },
          "NETEASE": {
            rating: 5,
            content_en: "Updates timely\n Stays customer-focused.",
            content_zh: "及时更新\n 保持客户导向。",
            date: "2023-10-12"
          },
          "iDASINGAPORE": {
            rating: 5,
            content_en: "Packaging safe\n Goods arrive intact.",
            content_zh: "包装安全\n 货物完好无损到达",
            date: "2023-10-12"
          },
          "FUJITSU": {
            rating: 5,
            content_en: "Advice helpful\n Guides purchase right.",
            content_zh: "建议有帮助\n" + "指导正确购买。",
            date: "2023-10-12"
          },
          "MCYS": {
            rating: 5,
            content_en: "Return easy, no complicated steps",
            content_zh: "返回简单，没有复杂的步骤。",
            date: "2023-10-12"
          },
          "MDA": {
            rating: 5,
            content_en: "Discounts nice\n Saves extra money.",
            content_zh: "折扣不错\n 节省额外的钱。",
            date: "2023-10-12"
          },
          "NOUR": {
            rating: 5,
            content_en: "Follow-up caring\n Feels valued much.",
            content_zh: "后续关怀\n 感觉被重视很多。",
            date: "2023-10-12"
          },
          // 可继续添加其他品牌的评价
        },
        // 评价显示控制
        activePartner: null,
        evaluationPosition: {
          top: 0,
          left: 0
        },


        partners: [
          {name: "BYBIT", image: new URL('@/assets/companyIntroduction/partners/BYBIT.webp', import.meta.url).href},
          {name: "UnderArmour", image: new URL('@/assets/companyIntroduction/partners/underarmour.webp', import.meta.url).href},
          {
            name: "MinistryofEducationSINGAPORE",
            image: new URL('@/assets/companyIntroduction/partners/MinistryofEducationSINGAPORE.webp', import.meta.url).href
          },
          {name: "Shell", image: new URL('@/assets/companyIntroduction/partners/shell.webp', import.meta.url).href},
          {name: "Zadaz", image: new URL('@/assets/companyIntroduction/partners/Zadaz.webp', import.meta.url).href},
          {name: "ComfortDelgro", image: new URL('@/assets/companyIntroduction/partners/ComfortDelgro.webp', import.meta.url).href},
          {name: "RoyalBankOfCanada", image: new URL('@/assets/companyIntroduction/partners/RoyalBankOfCanada.webp', import.meta.url).href},
          {name: "Sembcorp", image: new URL('@/assets/companyIntroduction/partners/Sembcorp.webp', import.meta.url).href},

          {name: "amazon", image: new URL('@/assets/companyIntroduction/partners/amazon.webp', import.meta.url).href},
          {name: "TheBlockchainCenter", image: new URL('@/assets/companyIntroduction/partners/TheBlockchainCenter.webp', import.meta.url).href},
          {name: "SPADIXTELECOM", image: new URL('@/assets/companyIntroduction/partners/SPADIXTELECOM.webp', import.meta.url).href},
          {name: "MINDEFSINGAPORE", image: new URL('@/assets/companyIntroduction/partners/MINDEFSINGAPORE.webp', import.meta.url).href},
          {name: "ARUVA", image: new URL('@/assets/companyIntroduction/partners/ARUVA.webp', import.meta.url).href},
          {
            name: "UnitedMiningIndustries",
            image: new URL('@/assets/companyIntroduction/partners/UnitedMiningIndustries.webp', import.meta.url).href
          },
          {name: "CHONGQING", image: new URL('@/assets/companyIntroduction/partners/CHONGQING.webp', import.meta.url).href},
          {name: "NATURESVILLE", image: new URL('@/assets/companyIntroduction/partners/NATURESVILLE.webp', import.meta.url).href},
          {name: "GROUPON", image: new URL('@/assets/companyIntroduction/partners/GROUPON.webp', import.meta.url).href},
          {name: "Olympus", image: new URL('@/assets/companyIntroduction/partners/olympus.webp', import.meta.url).href},
          {name: "NETEASE", image: new URL('@/assets/companyIntroduction/partners/NETEASE.webp', import.meta.url).href},
          {name: "iDASINGAPORE", image: new URL('@/assets/companyIntroduction/partners/iDASINGAPORE.webp', import.meta.url).href},
          {name: "FUJITSU", image: new URL('@/assets/companyIntroduction/partners/FUJITSU.webp', import.meta.url).href},
          {name: "MCYS", image: new URL('@/assets/companyIntroduction/partners/MCYS.webp', import.meta.url).href},
          {name: "MDA", image: new URL('@/assets/companyIntroduction/partners/MDA.webp', import.meta.url).href},
          {name: "NOUR", image: new URL('@/assets/companyIntroduction/partners/NOUR.webp', import.meta.url).href},
        ],

        // 新增服务下拉列表控制变量
        showServiceDropdown: false,
        mobileServiceOpen: false,
        // 产品轮播相关变量
        currentIndex: 0,
        // 主营业务轮播相关变量
        businessCurrentIndex: 0,
        slidePercentage: 100 / 3.5,  // 自动算出 3.5 张的比例
        // 语言相关
        currentLanguage: 'zh',

        langText: {
          partners: {
            sectiontitle: {zh: '合作伙伴', en: 'Long Term Partners'},
            sectionsubtitle: {zh: '聚力共赢', en: 'Win-win'}
          },
          service: {
            airFreight: {zh: '空运快递', en: 'Air Courier'},
            logistics: {zh: '物流服务', en: 'Logistics'},
            warehouse: {zh: '仓库管理', en: 'Inventory Management'}
          },
          nav: {
            service: {zh: '主营业务', en: 'Core Business'},
            talent: {zh: '人才招聘', en: 'Human Resource'},
            business: {zh: '商务旅行', en: 'Business Tourism'},
            products: {zh: '产品', en: 'Products'},
            aboutUs: {zh: '关于我们', en: 'About Us'},
            contact: {zh: '联系我们', en: 'Contact Us'},
            evaluation: {zh: '评价', en: 'Evaluation'},
            evaluationDate: {zh: '评价日期', en: 'Evaluation Date'}
          },
          btn: {
            location: {zh: '公司位置', en: 'Company Location'},
            close: {zh: '关闭', en: 'Close'},
            map: {zh: '点击查看详细地图', en: 'Click Here For Google Map'}
          },
          title: {
            mainSlogan: {zh: '用心服务', en: 'Serve With Dedication'},
            subSlogan: {zh: '品质产品', en: 'Quality Products'},
            products: {zh: '产品', en: 'Products'},
            productsSub: {zh: '公司产品周边', en: 'Company Merch'},
            business: {zh: '主营业务', en: 'Core Business'},
            businessSub: {zh: '服务', en: 'Services'},
            about: {zh: '关于我们', en: 'About Us'}
          },
          businessTitles: {
            zh: ['物流服务', '仓储管理', '产品设计', '采购代理', '批发业务', '供应链管理', '清关报税'],
            en: ['Logistics', 'Inventory Management', 'Design', 'Purchasing Agent', 'Wholesale', 'Supply Chain Management', 'Customs Clearance']
          },
          about: {
            sectiontitle: {zh: '关于我们', en: 'About Us'},
            sectionsubtitle: {zh: '我们是干什么的', en: 'Who We Are'},
            // 公司介绍文本
            companyName: {zh: 'HAND IN HAND', en: 'HAND IN HAND '},
            desc1: {
              zh: '是一家中外合资企业,致力于为全球市场采购、设计精品玩具、品牌周边、宣传礼品及企业礼品,并提供相关解决方案',
              en: 'is a Sino-foreign joint venture committed to purchasing, designing premium toys, brand peripherals, promotional gifts and ' +
                'corporate gifts for the global market, and providing related solutions'
            },
            desc2: {
              zh: '我们致力于成为深受国内外客户青睐的最时尚礼品供应商,已代理哈利·波特、漫威等国际品牌,分销的热门产品涵盖益智玩具到家居日用品等多个品类',
              en: 'We are committed to becoming the most fashionable gift supplier favored by customers at home and abroad. We have represented international' +
                ' brands such as Harry Potter and Marvel, and our distributed hot products cover various categories from educational toys to household daily necessities'
            },
            desc3: {
              zh: 'HAND IN HAND 以向世界展示最新、最热门、最优质的产品为使命,将持续努力,微笑为客户提供专业的一站式服务。',
              en: 'HAND IN HAND is committed to showcasing the latest, most popular and high-quality products to the world. We will continue to work hard and ' +
                'provide professional one-stop services to customers with a smile.'
            },
            // 底部链接标题及列表项
            links: {
              title1: {zh: '关于我们', en: 'About Us'},
              title2: {zh: '关于产品', en: 'Products'},
              title3: {zh: '影响力', en: 'Influence'},
              title4: {zh: '新闻媒体', en: 'News & Media'},
              title5: {zh: '联系我们', en: 'Contact Us'},
              list1: {
                zh: ['公司简介', '发展历程', '投资者关系'],
                en: ['Company Profile', 'Development History', 'Investor Relations']
              },
              list2: {zh: ['玩具精品', '定制', '包装设计'], en: ['Toys & Gifts', 'Customization', 'Packaging Design']},
              list3: {
                zh: ['企业文化', '企业交流', '企业社会责任', '环保与可持续性'],
                en: ['Company Culture', 'Business Networking', 'Corporate Social Responsibility', 'Environmental Social Governance']
              },
              list5: {zh: ['加盟合作', '加入我们'], en: ['Cooperation', 'Join Us']}
            }
          }
        },
        // 其他数据
        locationPanelVisible: false,
        mobileMenuVisible: false,
        isScrolled: false,
        modalVisible: false,
        currentProduct: null,
        products: [
          {
            id: 1,
            name: "Keychain",
            shortDesc: "高品质金属钥匙扣，多种设计可选",
            longDesc: "这款钥匙扣采用高品质金属材质，经过精细打磨和电镀处理，具有出色的耐用性和光泽度。提供多种设计图案，包括公司logo定制服务，是理想的商务礼品和个人配饰。",
            image: new URL('@/assets/companyIntroduction/basic/ProductShow/Keychain.webp', import.meta.url).href,
            features: [
              "优质304不锈钢材质",
              "多种设计可选",
              "防刮耐磨表面处理",
              "支持个性化定制",
              "轻巧便携"
            ]
          },
          {
            id: 2,
            name: "Blanket",
            shortDesc: "舒适保暖毛毯，适合办公室和家庭使用",
            longDesc: "我们的保暖毛毯采用优质珊瑚绒面料，触感柔软舒适，保暖性能出色。尺寸适中，适合办公室午休、居家休闲或旅行使用。提供多种颜色选择，易于清洗和保养。",
            image: new URL('@/assets/companyIntroduction/basic/ProductShow/Blanket.webp', import.meta.url).href,
            features: [
              "100%优质珊瑚绒",
              "双面绒面设计",
              "机洗不变形",
              "多种颜色可选",
              "尺寸：150cm x 200cm"
            ]
          },
          {
            id: 3,
            name: "Power Bank",
            shortDesc: "大容量移动电源，快速充电技术",
            longDesc: "这款大容量移动电源拥有10000mAh的电力储备，支持PD和QC双快充协议，可为多台设备同时充电。采用防火防爆材料，多重安全保护，轻薄便携的设计让您随时随地保持连接。",
            image: new URL('@/assets/companyIntroduction/basic/ProductShow/PowerBank.webp', import.meta.url).href,
            features: [
              "10000mAh大容量",
              "支持PD/QC 3.0快充",
              "三输出接口设计",
              "轻薄便携",
              "多重安全保护"
            ]
          },
          {
            id: 4,
            name: "Eye Mask",
            shortDesc: "亲肤透气睡眠眼罩，遮光缓压助眠",
            longDesc: "这款睡眠眼罩采用冰丝绒面料，触感柔滑亲肤，内层添加透气棉垫层，久戴不闷汗。3D立体剪裁贴合眼周轮廓，不压迫眼球与睫毛，同时实现99%遮光效果，轻松隔绝光线干扰。可调节弹性头带适配不同头围，无论是居家睡眠、午休小憩还是长途旅行，都能为你营造舒适的暗环境，快速放松眼部疲劳。",
            image: new URL('@/assets/companyIntroduction/basic/ProductShow/EyeMask.webp', import.meta.url).href,
            features: [
              "冰丝绒+透气棉双层面料",
              "3D立体剪裁，不压眼不夹睫毛",
              "高密遮光，阻隔99%光线",
              "可调节弹性头带，不勒耳",
              "水洗不变形，易打理"
            ]
          },
          {
            id: 5,
            name: "Notebook",
            shortDesc: "质感皮质笔记本，细腻书写体验",
            longDesc: "这款笔记本采用仿羊巴皮质封面，触感细腻亲肤且耐磨耐脏，边缘手工包边处理，久用不易脱线。内页选用80g米黄色道林纸，书写顺滑不洇墨，180°平摊设计方便跨页记录。内置书签绳与收纳夹层，可存放便签、票根等小物件，既有商务场合的精致质感，也适合日常手账、灵感记录使用。",
            image: new URL('@/assets/companyIntroduction/basic/ProductShow/Notebook.webp', import.meta.url).href,
            features: [
              "仿羊巴皮质封面，耐磨防刮",
              "80g米黄道林纸，不洇墨",
              "180°平摊设计，书写无死角",
              "含书签绳+收纳夹层，实用贴心",
              "多尺寸可选（A5/A6），适配不同场景"
            ]
          },
          {
            id: 6,
            name: "Foldable Umbrella",
            shortDesc: "晴雨两用折叠伞，抗风防晒双功能",
            longDesc: "这款折叠伞采用高密度碰击布面料，不仅能抵御中到大雨不渗水，更能阻隔99%紫外线，晴雨场景一键切换。8骨加粗玻纤伞架抗风性强，不易变形断裂，搭配防滑橡胶手柄握持舒适。收伞后仅32cm长，重量约400g，轻松放入背包，无论是通勤、旅行还是日常出行，都能随时提供防护。",
            image: new URL('@/assets/companyIntroduction/basic/ProductShow/Umbrella.webp', import.meta.url).href,
            features: [
              "高密度碰击布，防水防紫外线",
              "8骨玻纤伞架，抗风不易折",
              "32cm折叠尺寸，便携易收纳",
              "防滑橡胶手柄，握持稳固",
              "晴雨两用，多色简约设计"
            ]
          }
        ],
        businesses: [
          {image: new URL('@/assets/companyIntroduction/basic/coreBusiness/Logistics.webp', import.meta.url).href},          // 物流
          {image: new URL('@/assets/companyIntroduction/basic/coreBusiness/WarehouseManagement.webp', import.meta.url).href}, // 仓储管理
          {image: new URL('@/assets/companyIntroduction/basic/coreBusiness/Design.webp', import.meta.url).href},              // 设计
          {image: new URL('@/assets/companyIntroduction/basic/coreBusiness/PurchasingAgent.webp', import.meta.url).href},     // 采购代理
          {image: new URL('@/assets/companyIntroduction/basic/coreBusiness/Wholesale.webp', import.meta.url).href},           // 批发
          {image: new URL('@/assets/companyIntroduction/basic/coreBusiness/Procurement.webp', import.meta.url).href},         // 供应链管理
          {image: new URL('@/assets/companyIntroduction/basic/coreBusiness/CustomsClearanceandTaxDeclaration.webp', import.meta.url).href} // 清关报税
        ],
        socialMedia: [
          {
            name: "Facebook",
            localIcon: new URL('@/assets/companyIntroduction/basic/BottomNavigation/FacebookBlack.webp', import.meta.url).href,
            type: 'image',
            content: new URL('@/assets/companyIntroduction/basic/Social/FaceBook.webp', import.meta.url).href
          },
          {
            name: "email",
            localIcon: new URL('@/assets/companyIntroduction/basic/BottomNavigation/EmailBlack.webp', import.meta.url).href,
            type: 'text',
            content: 'handinhandcoltd@hotmail.con'
          },
          {
            name: "Instagram",
            localIcon: new URL('@/assets/companyIntroduction/basic/BottomNavigation/insBlack.webp', import.meta.url).href
          },
          {
            name: "Wechat",
            localIcon: new URL('@/assets/companyIntroduction/basic/BottomNavigation/WechatBlack.webp', import.meta.url).href,
            type: 'image',
            content: new URL('@/assets/companyIntroduction/basic/Social/Wechat.webp', import.meta.url).href
          },
        ],
        socialModalVisible: false,
        currentSocial: null,

      };
    },
    methods: {

      // 显示评价（修改后）
      showEvaluation(partner,partnerName, event) {
        // 只有存在评价的品牌才显示
        if (this.partnerEvaluations[partnerName]) {
          this.activePartner = partnerName;
          this.isReviewVisible = true; // 控制显示

          // 2. 原有位置计算逻辑（保持不变）
          this.evaluationPosition = {
            top: event.clientY + 10,
            left: event.clientX + 10
          };

          // 3. 原有防溢出逻辑（保持不变）
          const cardWidth = 320;
          const cardHeight = 200;
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          if (this.evaluationPosition.left + cardWidth > windowWidth) {
            this.evaluationPosition.left = event.clientX - cardWidth - 10;
          }
          if (this.evaluationPosition.top + cardHeight > windowHeight) {
            this.evaluationPosition.top = event.clientY - cardHeight - 10;
          }
        }
      },

      // 隐藏评价
      hideEvaluation() {
        this.activePartner = null;
        this.isReviewVisible = false; // 控制隐藏
      },

      openSocialModal(social) {
        this.currentSocial = social;
        this.socialModalVisible = true;
      },
      closeSocialModal() {
        this.socialModalVisible = false;
        this.currentSocial = null;
      },
      // 新增服务导航点击处理方法
      handleServiceClick(e) {
        // 在移动设备上切换下拉列表显示状态
        if (window.innerWidth <= 768) {
          e.preventDefault();
          this.mobileServiceOpen = !this.mobileServiceOpen;
        } else {
          // 桌面端正常跳转
          this.scrollToSection('services');
        }
      },

      // 打开仓库管理系统
      openWarehouseSystem() {
        window.open('http://wms.handinhandcoltd.com/', '_blank');
      },
      handleCloseLocationPanel() {
        console.log('尝试关闭位置面板');
        this.locationPanelVisible = false;
      },
      // 产品轮播 - 获取每页显示数量
      getPageSize() {
        if (window.innerWidth <= 768) return 1;
        if (window.innerWidth <= 992) return 2;
        return 3;
      },

      // 产品轮播 - 下一页
      nextSlide() {
        if (this.currentIndex < this.totalPages - 1) {
          this.currentIndex++;
        }
      },

      // 产品轮播 - 上一页
      prevSlide() {
        if (this.currentIndex > 0) {
          this.currentIndex--;
        }
      },

      // 主营业务轮播 - 下一页
      nextBusinessSlide() {
        if (this.businessCurrentIndex < this.businessTotalPages - 1) {
          this.businessCurrentIndex++;
        }
      },

      // 主营业务轮播 - 上一页
      prevBusinessSlide() {
        if (this.businessCurrentIndex > 0) {
          this.businessCurrentIndex--;
        }
      },

      // 语言切换
      toggleLanguage() {
        this.currentLanguage = this.currentLanguage === 'zh' ? 'en' : 'zh';
      },

      // 获取业务标题
      getBusinessTitle(index) {
        return this.langText.businessTitles[this.currentLanguage][index] || '';
      },

      // 获取翻译文本
      $t(key) {
        const keys = key.split('.');
        let text = this.langText;
        for (const k of keys) {
          text = text[k];
          if (!text) break;
        }
        return text ? text[this.currentLanguage] : key;
      },

      // 其他方法
      toggleLocationPanel() {
        this.locationPanelVisible = !this.locationPanelVisible;
        this.mobileMenuVisible = false;
      },

      toggleMobileMenu() {
        this.mobileMenuVisible = !this.mobileMenuVisible;
        if (this.mobileMenuVisible) {
          this.mobileServiceOpen = false;
        }
      },

      openProductModal(product) {
        this.currentProduct = product;
        this.modalVisible = true;
        this.locationPanelVisible = false;
        this.mobileMenuVisible = false;
      },

      closeModal() {
        this.modalVisible = false;
      },

      scrollToSection(sectionId) {
        // 滚动时关闭下拉列表
        this.showServiceDropdown = false;
        this.mobileServiceOpen = false;
        const element = document.getElementById(sectionId);
        if (element) {
          window.scrollTo({
            top: element.offsetTop - 80,
            behavior: 'smooth'
          });
        }
        this.mobileMenuVisible = false;
      },

      handleScroll() {
        this.isScrolled = window.scrollY > 50;
      },
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);
      // 监听窗口大小变化，重新计算轮播
      window.addEventListener('resize', () => {
        this.currentIndex = 0;
        this.businessCurrentIndex = 0;
        // 窗口大小变化时重置下拉状态
        this.showServiceDropdown = false;
        this.mobileServiceOpen = false;
      });


    },
    beforeUnmount() {
      window.removeEventListener('scroll', this.handleScroll);
      window.removeEventListener('resize', () => {
      });
    },
    computed: {
      // 产品轮播总页数
      totalPages() {
        const pageSize = this.getPageSize();
        return Math.ceil(this.products.length / pageSize);
      },

      // 主营业务轮播总页数
      businessTotalPages() {
        // 一共多少张卡片
        const total = this.businesses.length;
        // 一屏显示多少张（含半张）
        const visible = 3.5;
        // 总页数 = 向上取整
        return Math.ceil(total - visible + 1);
      }
    }
  };
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  }

  body {
    background-color: #f9f9f9;
    color: #333;
    overflow-x: hidden;
  }

  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* 顶部导航 */
  .top-nav {
    display: flex;
    justify-content: space-between; /* 左中右分布 */
    align-items: center;
    padding: 0 20px;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
  }

  .top-nav .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  .top-nav.scrolled {
    padding: 10px 0;
    background-color: rgba(144, 238, 144, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  }

  .logo {
    flex: 0 0 250px; /* 固定宽度，保证不会动（根据你的实际长度调，比如 220~260px） */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #000;
  }

  .logo img {
    max-height: 50px; /* 限制最大高度 */
    width: auto; /* 宽度自适应，保持比例 */
    height: auto; /* 高度自适应 */
    max-width: 150px; /* 防止过宽 */
    vertical-align: middle;
    margin-right: 10px;
    object-fit: contain; /* 保持完整比例，不裁切 */
  }

  .logo i {
    color: #008237;
  }

  .right-actions {
    flex: 0 0 300px; /* 固定宽度，避免因为文字变长而推动布局 */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 整个容器往右靠 */
    gap: 15px; /* 给左右两个分区加一点间距 */
  }

  .right-actions-left {
    display: flex;
    gap: 10px; /* 语言 + 菜单 挨在一起 */
  }

  .right-actions-right {
    display: flex;
    justify-content: flex-end; /* 保证位置按钮贴最右 */
  }

  .nav-links {
    flex: 1;
    display: flex;
    justify-content: center; /* 居中 */
    gap: 70px;
  }

  .nav-links a {
    display: inline-block;
    min-width: 110px; /* 固定宽度，保证中英文切换时不抖动 */
    text-align: center; /* 居中对齐 */
    margin: 0 10px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s;
    position: relative;
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #008237;
    transition: width 0.3s;
  }

  .nav-links a:hover {
    color: #008237;
  }

  .nav-links a:hover::after {
    width: 100%;
  }

  .location-btn {
    background: #008237;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(42, 92, 170, 0.3);

    min-width: 180px; /* 👈 固定按钮最小宽度，按英文“Company Location”的长度来 */
    justify-content: center; /* 按钮文字居中对齐 */
  }

  .location-btn:hover {
    background: #008237;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  }

  .mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #008237;
    cursor: pointer;
  }

  /* 公司位置面板 */
  .location-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: #90DFC3;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    z-index: 1100;
    transition: right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    overflow-y: auto;
  }

  .location-panel.active {
    right: 0;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
    transition: transform 0.3s;
  }

  .close-btn:hover {
    transform: rotate(90deg);
    color: #008237;
  }

  /* 标语区域 */
  .slogan-section {
    background: url('@/assets/companyIntroduction/basic/staticHeroImage.webp') no-repeat;
    background-size: cover;
    background-position: center;
    width: 100vw;
    min-height: 100vh;
    margin: 70px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .slogan-section .container {
    padding-top: 60px;
    padding: 0 20px;
    width: 100%;
  }

  .slogan-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
  }

  .main-slogan {
    color: white;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transform: translateY(0);
  }

  .sub-slogan {
    font-size: 24px;
    font-weight: 300;
    opacity: 0.9;
    opacity: 1;
    transform: translateY(0);
  }

  /* 产品区域 */
  .products-section {
    padding: 80px 0;
    background: white;
  }

  .section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #004337;
    opacity: 1;
    transform: translateY(0);
  }

  .section-subtitle {
    text-align: center;
    font-size: 18px;
    color: #777;
    margin-bottom: 50px;
    opacity: 1;
    transform: translateY(0);
  }

  .product-card {
    flex: 1;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    opacity: 1;
    transform: translateY(0);
    cursor: pointer;
  }

  .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }

  .product-image {
    height: 250px;
    background: #f0f4f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .product-image img {
    max-width: 80%;
    max-height: 80%;
    transition: transform 0.4s;
  }

  .product-card:hover .product-image img {
    transform: scale(1.05);
  }

  .product-info {
    padding: 25px;
    text-align: center;
  }

  .product-name {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #004337;
  }

  /* 主营业务轮播样式 */
  .business-section {
    padding: 80px 0;
    background: #f0f4f9;
  }

  .business-carousel-container {
    position: relative;
    width: 90%;
    margin: 0 auto 40px;
    overflow: hidden;
    padding: 0 20px; /* 为左右按钮留出空间 */
  }

  .business-carousel-wrapper {
    width: 100%;
    overflow: hidden;
  }

  .business-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    gap: 25px;
  }

  .business-card {
    flex: 0 0 calc(100% / 3.5); /* 一次显示 3.5 个 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .business-image {
    width: 100%;
    height: 550px; /* 👈 调整高度，让图片更大 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }


  .business-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 👈 改成 cover，让图片放大填充 */
  }

  .business-text {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #004337;
  }

  .business-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .business-content p {
    font-size: 14px;
    line-height: 1.4;
  }

  /* 轮播控制按钮 */
  .business-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 20px;
    color: #008237;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .business-carousel-btn.prev-btn {
    left: 0;
  }

  .business-carousel-btn.next-btn {
    right: 0;
  }

  .business-carousel-btn:hover {
    background: #008237;
    color: white;
    transform: translateY(-50%) scale(1.1);
  }

  .business-carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
    color: #999;
  }

  .business-carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }

  /* 关于我们区域 */
  .about-section {
    padding: 100px 0;
    background: white;
    position: relative;
  }

  .about-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f0f4f9"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23dbe5f1" stroke-width="1"/></svg>');
    opacity: 0.5;
  }

  .about-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  }

  .about-title {
    font-size: 40px;
    font-weight: 700;
    color: #008237;
    margin-bottom: 30px;
    opacity: 1;
    transform: translateY(0);
  }

  .about-links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 50px;
  }

  .link-column h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #008237;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
  }

  .link-column ul {
    list-style: none;
    text-align: left;
  }

  .link-column li {
    margin-bottom: 12px;
  }

  .link-column a {
    text-decoration: none;
    color: #555;
    transition: color 0.3s;
    font-size: 15px;
    display: block;
    padding: 5px 0;
  }

  .link-column a:hover {
    color: #008237;
    text-decoration: underline;
  }

  /* 底部区域 */
  .footer {
    background: #90DFC3;
    color: white;
    padding: 60px 0 30px;
    /* 添加相对定位，确保z-index生效 */
    position: relative;
    z-index: 10;
  }

  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap; /* 响应式调整 */
  }

  .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    padding: 10px 0;
    list-style: none;
  }

  /* 圆形背景容器 */
  .icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* 圆形直径 */
    height: 40px;
    border-radius: 50%; /* 圆形 */
    background-color: white; /* 白色背景 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影增加立体感 */
    transition: transform 0.3s ease;
  }

  /* 底部社交图标核心样式修改 */
  .social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px; /* 减少内边距 */
    transition: all 0.3s ease; /* 添加过渡效果 */
  }

  /* 悬停效果 */
  .social-icon:hover .icon-circle {
    transform: scale(1.1); /* 轻微放大 */
  }

  .social-icon:hover {
    background: #008237;
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2c7a7b; /* 深绿色，和页面主色调呼应 */
    /* 宽高改为一致，实现圆形 */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* 关键，让容器变成圆形 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  /* 图标本身缩小 */
  .float-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  /* 悬停效果：更亮的绿色，并有轻微放大 */
  .icon-container:hover {
    background-color: #38b2ac; /* 浅绿色 */
    transform: scale(1.1);
  }

  /* 模态框 */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .product-modal {
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .modal-overlay.active .product-modal {
    transform: scale(1);
  }

  .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #777;
    cursor: pointer;
    transition: all 0.3s;
  }

  .modal-close:hover {
    color: #008237;
    transform: rotate(90deg);
  }

  .modal-content {
    display: flex;
    gap: 40px;
  }

  .modal-image {
    flex: 1;
    background: #f0f4f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
  }

  .modal-image img {
    max-width: 100%;
    max-height: 300px;
  }

  .modal-info {
    flex: 1;
  }

  .modal-title {
    font-size: 32px;
    color: #008237;
    margin-bottom: 15px;
  }

  .modal-desc {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
  }

  .modal-features {
    margin-bottom: 30px;
  }

  .modal-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .modal-features i {
    color: #008237;
  }

  /* 产品轮播样式 */
  .carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto 50px;
    overflow: hidden;
  }

  .carousel-wrapper {
    width: 100%;
    overflow: hidden;
  }

  .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    gap: 30px;
  }

  .product-card {
    flex: 0 0 calc(100% / 3 - 20px);
  }

  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 20px;
    color: #008237;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-btn.prev-btn {
    left: -20px;
  }

  .carousel-btn.next-btn {
    right: -20px;
  }

  .carousel-btn:hover {
    background: #008237;
    color: white;
    transform: translateY(-50%) scale(1.1);
  }

  .carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
    color: #999;
  }

  .carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }

  .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .indicator.active {
    background: #008237;
    width: 30px;
    border-radius: 6px;
  }

  /* 关于我们区域新增样式 */
  .about-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  .about-title {
    font-size: 36px;
    font-weight: 700;
    color: #008237;
    margin-bottom: 10px;
  }

  .about-cards {
    display: flex;
    justify-content: center; /* 居中 */
    gap: 40px; /* 自然间距 */
    flex-wrap: wrap; /* 自动换行 */
    margin-top: 40px;
  }

  .about-card {
    width: 200px; /* 固定容器宽度，保证统一 */
    text-align: center;
  }

  .about-card-img {
    width: 100%; /* 图片填满容器 */
    aspect-ratio: 1/1; /* 保持正方形 */
    border-radius: 50%; /* 圆形 */
    object-fit: cover; /* 保证不变形 */
    margin-bottom: 15px;
  }

  .about-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #008237; /* 主色调突出 */
    margin-bottom: 5px;
  }

  .about-card-sub {
    font-size: 14px;
    color: #666;
  }

  /* 语言切换按钮 */
  .lang-btn {
    background: transparent; /* 去掉绿色背景 */
    border: none; /* 去掉边框 */
    cursor: pointer;
    padding: 4px; /* 给国旗留一点点点击空间 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lang-btn:focus {
    outline: none; /* 去掉点击时的外框 */
  }

  .flag-icon {
    width: 56px; /* 稍微大一点 */
    height: 40px;
    object-fit: cover;
    border-radius: 3px; /* 国旗圆角 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 阴影 */
    transition: transform 0.2s ease;
    vertical-align: middle;
  }

  .flag-icon:hover {
    transform: scale(1.1); /* 鼠标悬停时放大 */
  }

  .float-icons {
    width: 20px; /* 可根据需求调整，比如占容器80%等，让图标在圆内合适显示 */
    height: 20px;
    object-fit: contain; /* 保持图片比例，填充容器，避免拉伸变形 */
  }

  /* 响应式设计 */
  @media (max-width: 1200px) {
    .business-card {
      flex: 0 0 33.33%; /* 在大屏幕上调整为3张 */
    }
  }

  @media (max-width: 992px) {
    .nav-links {
      margin: 0 15px;
      gap: 15px;
    }

    .logo, .location-btn {
      margin: 0 15px;
    }

    .products-container {
      flex-direction: column;
    }

    .product-card {
      flex: 0 0 calc(100% / 2 - 20px);
    }

    .business-card {
      flex: 0 0 50%; /* 中等屏幕显示2张 */
    }

    .about-links {
      grid-template-columns: repeat(2, 1fr);
    }

    .modal-content {
      flex-direction: column;
    }
  }

  @media (max-width: 768px) {
    .service-dropdown {
      position: static;
      opacity: 1;
      transform: none;
      box-shadow: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .service-dropdown.visible {
      max-height: 300px;
      margin-top: 10px;
    }

    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      flex-direction: column;
      gap: 0;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      padding: 20px 0;
    }

    .nav-links.active {
      display: flex;
      padding: 15px;
      width: 100%;
    }

    .nav-links a {
      min-width: auto; /* 不固定宽度，避免挤压 */
      text-align: left; /* 左对齐更自然 */
      width: 100%; /* 占满一行 */
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }

    .mobile-menu-btn {
      display: block;
    }

    .business-card {
      flex: 0 0 100%; /* 小屏幕显示1张 */
    }

    .about-links {
      grid-template-columns: 1fr;
    }

    .footer-content {
      flex-direction: column;
      gap: 30px;
    }

    .main-slogan {
      font-size: 36px;
    }

    .sub-slogan {
      font-size: 20px;
    }

    .product-card {
      flex: 0 0 100%;
    }

    .carousel-btn {
      width: 40px;
      height: 40px;
      font-size: 16px;
    }

    .carousel-btn.prev-btn {
      left: 5px;
    }

    .carousel-btn.next-btn {
      right: 5px;
    }

    .lang-btn {
      padding: 8px 15px;
      font-size: 14px;
      margin-right: 5px;
    }

    .social-icon {
      width: 40px;
      height: 40px;
      padding: 6px;
    }
  }

  .nav-item {
    position: relative;
    display: inline-block;
  }

  .service-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 10px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
  }

  .service-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .service-dropdown li {
    margin: 0;
  }

  .service-dropdown a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
  }

  .service-dropdown a:hover {
    background-color: #f0f4f9;
    color: #008237;
  }


  /* 合作伙伴模块 */
  .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 自动换行 */
    gap: 40px; /* 泡泡间距 */
    justify-items: center;
    align-items: center;
    padding: 50px;
    min-height: 600px;
    background: #ffffff;
    position: relative;
  }

  .partner-bubble {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .partner-bubble:hover {
    transform: scale(1.2);
  }

  .partner-bubble img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
  }

  /* 评价卡片样式 */
  .evaluation-card {
    position: fixed;
    background-color: transparent;
    padding: 1.2rem;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .evaluation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.8rem;
  }

  .evaluation-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
  }

  .rating {
    color: #7f8c8d;
  }

  .evaluation-content p {
    margin: 0;
    color: #000;
    line-height: 1.4;
    font-size: 16px;
  }

  .evaluation-meta {
    font-size: 0.85rem;
    color: #7f8c8d;
    text-align: right;
  }

  /* 小三角指示器 */
  .triangle {
    position: absolute;
    top: 12px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #90DFC3;
    border-bottom: 10px solid transparent;
  }

  .triangle-style-1 { border-top-color: #1890ff; bottom: -20px; left: 20px; }
  .triangle-style-2 { border-top-color: #fa8c16; bottom: -20px; left: 20px; }
  .triangle-style-3 { border-top-color: #52c41a; bottom: -20px; left: 20px; }
  /* 继续写到 triangle-style-24 */


  /* 响应式调整 */
  @media (max-width: 768px) {
    .evaluation-card {
      width: 280px;
      max-width: 90vw;
    }
  }

  /* 评价卡片星星样式 */
  .rating .fa-star {
    font-size: 16px; /* 星星大小 */
    margin: 0 2px; /* 星星间距 */
  }

  /* 懒加载图片样式 */
  .lazy-img {
    transition: opacity 0.3s ease-in-out;
  }

  .lazy-img.lazy {
    opacity: 0;
  }

  .lazy-img.loaded {
    opacity: 1;
  }

  /* 懒加载占位符样式 */
  .lazy-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }

  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

</style>
